<html>
<head>
    <title>双预防系统</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">

    <style>
        body {
            background: #F0F2F6;
        }

        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer {
            height: 200px;
        }

        .inputW {
            width: 150px;
        }

        .itemW {
            width: 200px;
        }

        .formLabelWidth {
            width: 100px;
        }
    </style>
</head>
<body>
<div class="page" id="page-monitor">
    <div class="page-main">
        <el-row>
            <el-col :span="24">
                <el-table :data="timeTable"  :stripe="true" :border="true" size="mini" style="width: 100%">
                    <el-table-column prop="macId" label="机器编码" align="center"></el-table-column>
                    <el-table-column prop="name" label="机器名称" align="center">
                    </el-table-column>
                    <el-table-column prop="location" label="安装位置" align="center">
                    </el-table-column>
                    <el-table-column prop="deviceNo" label="设备编号" align="center">
                    </el-table-column>
                    <el-table-column label="操作" align="left">
                        <template slot="header" slot-scope="scope">
                            <el-tag @click="add_time">添加</el-tag>
                        </template>
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" icon="el-icon-edit" @click="edit_time(scope.row)">修改</el-button>
                            <el-button type="primary" size="mini" icon="el-icon-delete" @click="del_time(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page-footer">
                    <el-pagination background layout="prev, pager, next" :pagesize="param.pagesize" :total="totalCount"
                                   :current-page.sync="param.pageno" @current-change="onChangePage">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>





        <el-dialog
                width="40%"
                title="考勤机器"
                :visible.sync="addVisible" :close-on-click-modal="false">

            <el-form :model="macForm" ref="macForm">

                <el-form-item label="机器编码" prop="macId" :label-width="formLabelWidth"  :rules="[
                                     {required:true,message:'请输入机器编码,内容不能为空!',trigger:'blur'}
                            ]">
                    <el-input v-model="macForm.macId" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="机器名称" prop="name" :label-width="formLabelWidth"  :rules="[
                                     {required:true,message:'请输入机器名称,内容不能为空!',trigger:'blur'}
                            ]">
                    <el-input v-model="macForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="安装位置" prop="location" :label-width="formLabelWidth"  :rules="[
                                     {required:true,message:'请输入安装位置,内容不能为空!',trigger:'blur'}
                            ]">
                    <el-input v-model="macForm.location" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="设备编号" prop="deviceNo" :label-width="formLabelWidth"  :rules="[
                                     {required:true,message:'请输入设备编号,内容不能为空!',trigger:'blur'}
                            ]">
                    <el-input v-model="macForm.deviceNo" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveClick">确 定</el-button>
            </div>

        </el-dialog>





    </div>
</div>
<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>
<script>
    var vuePage = new Vue({
        el: '#page-monitor',
        data: {
            timeTable:[],
            param:{
                pagesize:10,
                pageno:1,
                projectNo:SiteConfig.account.projectNo
            },
            totalCount:0,
            addVisible:false,
            formLabelWidth:'120px',
            macForm:{},
        },
        created: function () {
            $('.page').show();
        },
        methods: {
            search(){

            },
            add_time(){
                this.addVisible = true;
                this.macForm = {};
            },
            onChangePage(page){
                this.param.pageno = page;
                this.getTimeCheck();
            },
            edit_time(row){
                this.addVisible = true;
                this.macForm = {
                    macId:row.macId,
                    name:row.name,
                    location:row.location,
                    deviceNo:row.deviceNo,
                    id:row.id,
                    projectNo:row.projectNo
                };
                this.editMod = true;

            },
            saveClick(){
                this.$refs['macForm'].validate((valid) =>{
                       if (valid){

                           if (!this.editMod){
                               this.macForm.projectNo = SiteConfig.account.projectNo;
                                HttpUtil.get('Machine/Add',this.macForm).success((r)=>{
                                    if (r.state == 0){
                                        this.$message.success("保存成功!");
                                        this.macForm = {};
                                        this.editMod = false;
                                        this.addVisible = false;
                                        this.getTimeCheck();
                                    }else{
                                        this.$message({
                                            type: 'error',
                                            message:'报错!'+ r.errMsg
                                        });
                                    }
                                })
                           }else {
                               HttpUtil.get('Machine/Update',this.macForm).success((r)=>{
                                   if (r.state == 0){
                                       this.$message.success("保存成功!");
                                       this.macForm = {};
                                       this.editMod = false;
                                       this.addVisible = false;
                                       this.getTimeCheck();
                                   }else {
                                       this.$message({
                                           type: 'error',
                                           message:'报错!'+ r.errMsg
                                       });
                                   }
                               })
                           }
                       }
                })
            },
            getTimeCheck(){
               HttpUtil.get('Machine/List',this.param).success((r)=>{
                       if (r.state==0) {
                           this.timeTable = r.data;
                           this.totalCount = r.total;
                       }
               })
            },
            del_time(row){

                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {

                    HttpUtil.get('Machine/Delete',{id:row.id}).success((r)=>{
                        if (r.state == 0) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.getTimeCheck();
                        }
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            }
        },

        mounted: function () {
                this.getTimeCheck();
        }
    });
</script>
</body>
</html>
